<template>
  <div class="background"> 
    <div class="hd mt10">
    		<img src="../../assets/yygh.png" alt="">
    	</div>
    	<div class="yygh_search">
			<ul>
				<li>
					<router-link to="/yygh" class="my_app">预约挂号</router-link>
				</li>
				<li>
					<router-link to="/personal/history" class="hover">我的预约</router-link>
				</li>
			</ul>
		</div>
		<div class="content re">
			<position>
				<router-link to="/yygh">预约挂号</router-link>
				&gt;
				<span class="last">取消预约</span>
			</position>

			<div class="mt20">
				<div class="my_appointment" >
					<div class="cancel-order" >
						<ul class="middle fl">
              <li class="first">
                <span class="t3">就诊人：</span>
					      	<span>{{orderToCancel.regName}}</span>
									&nbsp;&nbsp;&nbsp;
									<span class="t3">就诊序号：</span>
					      	<span class="f20 t6">{{orderToCancel.regVisitingNumber}}</span>
              </li>
							<li>
								<span class="t3">就诊科室：</span>&nbsp;&nbsp;
								<span>{{orderToCancel.regDeptName}}</span>
							</li>
							<li>
								<span class="t3">医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院：</span>&nbsp;&nbsp;
								<span class="name">{{orderToCancel.orgFullName}}</span>
							</li>
              <li>
								<span class="t3">就诊时间：</span>&nbsp;&nbsp;
								<span>{{orderToCancel.workDate}} 下午 {{orderToCancel.startTime}}-{{orderToCancel.endTime}}</span>
							</li>
							<li>
								<span class="t3">挂号费：</span>
								<span class="f20 t6">{{orderToCancel.charge}}</span>
								<span>元</span>
							</li>
					
						</ul>
              <ul class="middle fr">
                 <li class="first">
                   取消原因：
                  </li>
                <li v-for="(v, i) in CANCEL_ORDER_RESIONS" :key="i"> <el-radio v-model="radioResion" :label="(i+1)">{{v}}</el-radio></li>
              </ul>
              
					</div>
          
				</div>
        <div class="center">
								<a class="common-main-button" href="javascript:;" @click="cancelOrder">确认取消</a>
							</div>
				</div>

        	<!-- dialog  -->
					<el-dialog :visible.sync="dialog.show" custom-class=" dialog-common">
						<div class="dialog-title" slot="title">
							提示
						</div>
						<div style="line-height:2;">{{dialog.content}}</div>
						<div slot="footer" class="dialog-footer center">
							<a class="common-main-button" href="javascript:;" @click="dialog.fn">确定</a>
						</div>
					</el-dialog>

			<div class="warn">
					<ul>
						<li>
							<img src="../../assets/warn.png" alt="">
							<span>温馨提示</span>
						</li>
						<li>
							取消预约成功后，费用将在7个工作日内到账；如遇退款失败，可拨打（025）86617141-20130沟通
						</li>
					
					</ul>
				</div>
		</div>
  </div>
</template>

<script>
import {
  commonAjax,
  ORG_ID,
	PLATFORM_PREFIX,
  PAY_STATUS,
  CANCEL_ORDER_RESIONS,
  PRODUCT_ID
} from '../../api/api'
import Loading from '../../components/Loading'
import Position from '../../components/Position'
import LeftTime from '../../components/LeftTime'
export default {
	components: {Position, Loading, LeftTime}, 
	data () {
		return {
			person: JSON.parse(localStorage.person),
			pageNo: 1,
			pageSize: 50,
      lists: [],
      radioResion: 1,
			defaultLists: [],
			PAY_STATUS: PAY_STATUS,
      orderToCancel: JSON.parse(localStorage.orderToCancel),
      CANCEL_ORDER_RESIONS: CANCEL_ORDER_RESIONS,
      dialog: {
				show: false,
				fn: () => {},
				content: ''
			}
		}
	},
	mounted () {
	},
	methods: {
		rePay (list) {
			localStorage.list = JSON.stringify(list)
			this.$router.push('/yygh/pay?from=myappoint')
		},
		radioChange (val) {
			let _this = this
			this.lists = this.defaultLists.filter((v, i) => {
				if (_this.PAY_STATUS[0] === val) return true
				return _this.PAY_STATUS[v.payStatus] === val
			})
    },
    cancelOrder () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax([
        PRODUCT_ID,
        this.orderToCancel.registrationId,
        CANCEL_ORDER_RESIONS[this.radioResion - 1],
				1
      ], `${PLATFORM_PREFIX}.registrationService`, 'cancelRegistration ').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          this.dialog = {
            show: true,
            content: '取消挂号成功',
            fn: () => this.$router.replace('/personal/history')
          }
        } else {
          this.dialog = {
            show: true,
            content: res.data.msg,
            fn: () => this.dialog.show = false
          }
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        console.log(res)
      })
    }
	}
}
</script>

<style lang="less">
.background{
	.content{
		width: 1080px;
		margin:0 auto;
		background-color: #ffffff;
		overflow: hidden;
	}
	.content .my_appointment{
		width: 1040px;
		margin:0 auto;
		background-color: rgb(254,251,248);
		border:1px solid rgb(245,230,227);
    position: relative;
    padding: 20px;
		margin-bottom: 20px;
	}


  .cancel-order {
    .middle{
      width: 48%;
    }
    .resions {
      width: 48%;
      padding: 20px;
    }
  }
	.cancel-order, .middle{
    overflow: hidden;
  }
	.cancel-order .middle li{
    padding: 10px 0 0;
    &.first {
      border-bottom: 1px solid rgb(245,230,227);
      padding-bottom: 20px;
    }
	}

	.cancel-order .bottom{
		margin-left:20px;
		padding-bottom: 20px;
	}
	.cancel-order .bottom span:nth-of-type(1){
		color: #999999;
	}

	.cancel-order .middle .name{
		display: inline-block;
		width: 300px;
	}
	.cancel-order .middle .left span:nth-of-type(1){
		font-size: 14px;
		color: #999999;
	}
	.cancel-order .middle .right span:nth-of-type(1){
		font-size: 14px;
		color: #999999;
	}
	.cancel-order .middle .right span:nth-of-type(2){
		font-size: 14px;
		color: #993333;
	}
	.cancel-order .middle .right{
		width: 200px;
	}
	.cancel-order .middle .state span:nth-of-type(1){
		color: #666666;
	}
	
	.border{
		width: 1040px;
		height: 1px;
		background-color: #cccccc;
		margin:50px auto;
	}
	.content .warn{
		margin-left: 46px;
		margin-top: 30px;
		padding-bottom: 100px;
	}
	.content .warn li{
		font-size: 14px;
		color: #666666;
		margin-top: 10px;
		font-family: 'Microsoft YaHei';
	}
}
  	
</style>
